import {
  Component,
  OnInit,
  AfterViewInit,
  AfterContentInit,
  ViewChild,
  ElementRef,
  ViewChildren,
  QueryList,
  ContentChildren
} from '@angular/core';
import {Router, ActivatedRoute, ParamMap} from '@angular/router';
import 'rxjs/add/operator/switchMap';
import {NzModalService, NzMessageService} from 'ng-zorro-antd';
import {FreightAddService} from './freightAdd.serve';

import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';

@Component({
  selector: 'freight-add',
  templateUrl: './freightAdd.component.html',
  styleUrls: ['./freightAdd.component.scss'],
  providers: [FreightAddService]
})

export class FreightAddComponent implements OnInit {
  _isSpinning=false;
  isVisible=false;
  validateForm:FormGroup;
  _log(value){
    console.log(value);
  }
  rangeList=[];
  rangeList1=[];
  rangeLoading=true;
  type=0;//运费类型  平邮  快递  ems
  listArr=[[],[],[]];
  place=[];
  ngOnInit() {
    this.validateForm = this.fb.group({
      name:[ null, [ Validators.required ] ],
      checkOptionsOne : [[
        { label: '平邮', value: '0'},
        { label: '快递', value: '1' },
        { label: 'ems', value: '2' },
      ],[ Validators.required,this.checkType ]]
    });
    let validateForm=this.validateForm;
    validateForm.get('checkOptionsOne').valueChanges.subscribe(data=>{
      data.forEach(item=>{
        if (item.checked) {
          validateForm.addControl( "value["+item.value+"][0][value1]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]+)?$')]) );
          validateForm.addControl( "value["+item.value+"][0][value2]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]{1,2})?$')]) );
          validateForm.addControl( "value["+item.value+"][0][value3]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]+)?$')]) );
          validateForm.addControl( "value["+item.value+"][0][value4]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]{1,2})?$')]) );
        }else{
          validateForm.removeControl( "value["+item.value+"][0][value1]" );
          validateForm.removeControl( "value["+item.value+"][0][value2]" );
          validateForm.removeControl( "value["+item.value+"][0][value3]" );
          validateForm.removeControl( "value["+item.value+"][0][value4]" );
        }
      })
    });
  }
  checkType(controlGroup){
    let arr=controlGroup.value.filter(item=>{
      return item.checked;
    })
    console.log(arr.length);
    return arr.length>0 ? null : { checkOptionsOne: { info: '请选择配送方式' } };
  }
  constructor(private fb: FormBuilder,private FreightAddService:FreightAddService){

  }
  changIndex(index){

  }
  handleCancel(e){
    this.isVisible=false;
  }
  allChecked=false;
  allChecked1=false;
  updateAllChecked() {
    this.indeterminate = false;
    if (this.allChecked) {
      this.leftdisabled=false;
      this.rangeList.forEach(item => item.checked = true);
    } else {
      this.leftdisabled=true;
      this.rangeList.forEach(item => item.checked = false);
    }
  }
  updateAllChecked1(){
    this.indeterminate1 = false;
    if (this.allChecked1) {
      this.rightdisabled=false;
      this.rangeList1.forEach(item => item.checked = true);
    } else {
      this.rightdisabled=true;
      this.rangeList1.forEach(item => item.checked = false);
    }
  }
  indeterminate = false;
  indeterminate1=false;
  index0=1;
  index1=1;
  index2=1;
  handleOk(e){//添加指定地区 对话框 确定
    if (this.rangeList1.length==0) {
      this.isVisible=false;
      return false;
    }
    let arr=[];
    this.rangeList1.forEach(item=>{
      arr.push(item.label);
    });
    this.listArr[this.type].push({name:arr.join(','),index:this["index"+this.type],list:this.rangeList1});
    this.validateForm.addControl( "value["+this.type+"]["+this["index"+this.type]+"][value1]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]+)?$')]) );
    this.validateForm.addControl( "value["+this.type+"]["+this["index"+this.type]+"][value2]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]{1,2})?$')]) );
    this.validateForm.addControl( "value["+this.type+"]["+this["index"+this.type]+"][value3]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]+)?$')]) );
    this.validateForm.addControl( "value["+this.type+"]["+this["index"+this.type]+"][value4]", this.fb.control("",[Validators.required,Validators.pattern('^[0-9]+([\.][0-9]{1,2})?$') ]) );
    this["index"+this.type]++;
    this.isVisible=false;
  }
  checkvalue(type){ //运费配置规则验证
    let validateForm = this.validateForm;
    var pd=false;
    if ((validateForm.controls['value['+type+'][0][value1]']&&validateForm.controls['value['+type+'][0][value1]'].dirty
              &&(validateForm.controls['value['+type+'][0][value1]'].hasError('required')||validateForm.controls['value['+type+'][0][value1]'].hasError('pattern') ) )
        ||(validateForm.controls['value['+type+'][0][value2]']&&validateForm.controls['value['+type+'][0][value2]'].dirty
              &&(validateForm.controls['value['+type+'][0][value2]'].hasError('required') ||validateForm.controls['value['+type+'][0][value2]'].hasError('pattern') ) )
        ||(validateForm.controls['value['+type+'][0][value3]']&&validateForm.controls['value['+type+'][0][value3]'].dirty
              && (validateForm.controls['value['+type+'][0][value3]'].hasError('required') ||validateForm.controls['value['+type+'][0][value3]'].hasError('pattern') ) )
        ||(validateForm.controls['value['+type+'][0][value4]']&&validateForm.controls['value['+type+'][0][value4]'].dirty
              && (validateForm.controls['value['+type+'][0][value4]'].hasError('required')||validateForm.controls['value['+type+'][0][value4]'].hasError('pattern')  ) )
     ) {
      return true;
    }
    this.listArr[type].forEach(item1=>{
      if ( (validateForm.controls['value['+type+']['+item1.index+'][value1]']&&validateForm.controls['value['+type+']['+item1.index+'][value1]'].dirty
              &&(validateForm.controls['value['+type+']['+item1.index+'][value1]'].hasError('required')||validateForm.controls['value['+type+']['+item1.index+'][value1]'].hasError('pattern') ) )
            ||(validateForm.controls['value['+type+']['+item1.index+'][value2]']&&validateForm.controls['value['+type+']['+item1.index+'][value2]'].dirty
              &&(validateForm.controls['value['+type+']['+item1.index+'][value2]'].hasError('required')||validateForm.controls['value['+type+']['+item1.index+'][value2]'].hasError('pattern') ) )
            ||(validateForm.controls['value['+type+']['+item1.index+'][value3]']&&validateForm.controls['value['+type+']['+item1.index+'][value3]'].dirty
              &&(validateForm.controls['value['+type+']['+item1.index+'][value3]'].hasError('required')||validateForm.controls['value['+type+']['+item1.index+'][value3]'].hasError('pattern')) )
            ||(validateForm.controls['value['+type+']['+item1.index+'][value4]']&&validateForm.controls['value['+type+']['+item1.index+'][value4]'].dirty
              && (validateForm.controls['value['+type+']['+item1.index+'][value4]'].hasError('required')||validateForm.controls['value['+type+']['+item1.index+'][value4]'].hasError('pattern') ) )
        ) {
        pd=true;
      }
    });
    return pd;
  }
  placeError=false;
  _submitForm(){
    if (this.place.length==0) {
      this.placeError=true;
    }else{
      this.placeError=false;
    }
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[ i ].markAsDirty();
    }
    console.log(this.validateForm.value);

  }

  deleteitem(type,index,item1){
    let validateForm=this.validateForm;
    validateForm.removeControl('value['+type+']['+item1.index+'][value1]');
    validateForm.removeControl('value['+type+']['+item1.index+'][value2]');
    validateForm.removeControl('value['+type+']['+item1.index+'][value3]');
    validateForm.removeControl('value['+type+']['+item1.index+'][value4]');
    this.listArr[type].splice(index,1);
  }
  addrange(type,item=null){
    this.type=type;
    if (item) {
      this.rangeList1=item.list;
      let valueArr=this.rangeList1.map(item=>{
        return item.value;
      });
      this.rangeList.forEach(item=>{
        if (valueArr.indexOf(item.value)>=0 ) {
          item.disabled=true;
        }else{
          item.disabled=false;
        }
      });
    }else{
      this.rangeList1=[];
      this.rangeList.forEach(item=>{
        item.disabled=false;
      });
    }
    //this.rangeList1 = this.listArr[this.type]; //赋值
    this.isVisible=true;
    if (this.rangeList.length==0) {
      this.FreightAddService.getProvinceList().subscribe(res => {
        if (res.code==2000) {
          this.rangeList=res.data.map(item=>{
            return {
              label:item.name,
              value:item.code,
              checked:false
            }
          });
        }
      });
    }
  }
  chooseRange(){
    var list=this.rangeList.filter(item=>{
                if (item.checked) {
                  item.checked=false;
                  item.disabled=true;
                  return true;
                }else{
                  return false;
                }
              });
    var list1=list.map(item=>{
      let obj= Object.assign({},item);
      obj.disabled=false;
      return obj;
    })

    this.leftdisabled=true;
    this.indeterminate=false;
    this.allChecked=false;
    this.rangeList1=this.rangeList1.concat(list1);
  }
  removeRange(){
    let remove1=this.rangeList1.filter(item=>{
      return item.checked;
    })
    this.rangeList1=this.rangeList1.filter(item=>{
      return !item.checked;
    });

    let valueArr=remove1.map(item=>{
      return item.value;
    })
    this.rangeList.forEach(item=>{
      if (valueArr.indexOf(item.value)>=0 ) {
        item.disabled=false;
      }
    });
    this.rightdisabled=true;
    this.indeterminate1=false;
    this.allChecked1=false;
  }
  leftdisabled=true;
  rightdisabled=true;
  changeChecked(value){
    if (this.rangeList.every(item => item.checked === false)) {
      this.allChecked = false;
      this.indeterminate = false;
      this.leftdisabled=true;
    } else if (this.rangeList.every(item => item.checked === true)) {
      this.allChecked = true;
      this.indeterminate = false;
      this.leftdisabled=false;
    } else {
      this.indeterminate = true;
      this.leftdisabled=false;
    }
  }
  changeChecked1(value){
    if (this.rangeList1.every(item => item.checked === false)) {
      this.allChecked1 = false;
      this.indeterminate1 = false;
      this.rightdisabled=true;
    } else if (this.rangeList1.every(item => item.checked === true)) {
      this.allChecked1 = true;
      this.indeterminate1 = false;
      this.rightdisabled=false;
    } else {
      this.indeterminate1 = true;
      this.rightdisabled=false;
    }
  }
}
